// 导入：类型、接口、模块、组件、样式
import { Component } from "react";

import QfLoading from "../../../components/qfLoading";

import "../styled.scss";

class Index extends Component {
  state = {
    num: 10,
    loadingState: false,
  };

  componentDidMount(): void {
    // 在componentDidMount中
    const docEl = document.documentElement;
    // 1、监控窗口滚动
    window.addEventListener("scroll", () => {
      // 2、事件处理函数中
      // - 2.1 获取滚动条到顶部的距离
      const scrollTop = docEl.scrollTop;
      // - 2.2 获取可见视口的高度
      const clientHeight = docEl.clientHeight;
      const scrollHeight = docEl.scrollHeight;
      // - 2.3 获取内容总高度
      // - 判断   当 2.1 + 2.2  >= 2.3  代表到底了    =>  异步请求获取数据追加到模型中
      if (scrollTop + clientHeight >= scrollHeight) {
        console.log("到底啦~");
        // 异步请求加载更多数据
        // 先开启loading
        // 然后请求接口 -》 拿到数据后再隐藏loading
        this.setState({
          loadingState: true,
        });
        // 模拟异步请求
        setTimeout(() => {
          this.setState({
            num: this.state.num + 10,
            loadingState: false,
          });
        }, 2000);
        // ...
      }
    });
  }

  films = () => {
    return new Array(this.state.num).fill(6).map((item, i) => {
      return (
        <div className="film" key={i}>
          <img
            src="https://static.maizuo.com/pc/v5/usr/movie/b16225b07bb1789563e35c42c3a32959.jpg?x-oss-process=image/quality,Q_70"
            alt=""
            className="poster"
          />

          <div className="info">
            <div className="title">
              野蛮人入侵{i + 1}
              <span>2D</span>
            </div>
            <div className="author">主演：杜乃强</div>
            <div className="time">上映时间：周二 8月4日</div>
          </div>

          <div className="buy">预购</div>
        </div>
      );
    });
  };

  render() {
    // [<h1>1</h1>, <h1>2</h1>, <h1>3</h1>]
    // const newarr = [1,2,3].map((item) => {
    //    return <h1>{item}</h1>
    // })
    // ----
    // const newarr = 后端数据数组里面是一个个对象.map(() => {
    //     return  <div className="film"></div>
    // })

    return (
      <>
        {this.films()}

        {this.state.loadingState && (
          <div className="film">
            <QfLoading />
          </div>
        )}
      </>
    );
  }
}
export default Index;
